[モバイルUIデザイン]アイコン作成を真剣に考えた vol.2基準線を考える

こんにちは、デザイナーの たなか ゆきこ です。

前回『アイコンの形状と大きさのバランスについて』の記述をしたのですが、今回は作る時のベースの話をしてみようかと思います。

モバイルUIとタイトルにつけているので、アイコンありきでアイコンのグラフィック作成について書いてますが、そもそもアイコンを使うべきなのかという話もデザイナーが考えるべき設計（design）なんじゃないかなーという気持ちもありつつ進めます。

ベースを作ってみよう

アイコンのベースになるものを作成したいと思います。

まずは、基準となるの四角のサイズを決めるために、iOSとAndroidを参考にしてみます。

iOSは黄金比？

1. 四角を作ってまずは、センターラインを引く。四角形の黄金比で線を引く。Appleのガイドものせてみる。Appleのガイド自体が、アプリ中のアイコン用ではないので、違うとかあっているとかではないです。なんとなくでのせてみました。
   
2. 22x22で作った場合、内側に16x16とちょうどキリの良い数字の9つの正方形ができるじゃないか。これを基準の四角にすると良いのでははないかという一つの仮説がでます。
   

Androidのガイドは見ながら作ると簡単にできる

次にAndoroidを試しましょう、MaterialDesignがよくできているのがわかります。このまま指示通りに製作すると、本当に純正のアイコンができますw。

48のタッチ領域の中に24。上から今まで出てきた数字を眺めていて、私てきには『2,4,8』という数字が最強に思えます。iOSが22でAndroidが24なら、もう22で作ればいいじゃないかという考えももでてきますが、それはアイコン単体で見た時の話なので、全体を見て考えよう。

Style - Icons

上記を参考にいろいろ考えて自分なりに作ります

iOSとAndroidのアイコンですが、両方同じで作ろうと思わずに別に作成すればいいのですが、時間やアプリの統一感など考え共通で作成できるようにしたいとか色々。

最小の線の細さを1にするという条件付きであったり、2にする場合は、少し基準を考える必要がある。線の太さや、塗りの大きさとか重量感でも調整が入ります。

各条件で、毎回基準線を構築するのもお仕事かなと。

結論としては、『基礎を分析した上で、自分で考える』です

なんか出たら勉強しておくのがいい。

前回の分と合わせる

さて、ここで前回作った、丸とか長方形とか覚えてますでしょうか。 出番です！作った基準の四角形を合わせて貼り付けてます。

なんとなくベースができたような気がします。

自分で考えた基準線でアイコンを作ると綺麗に見える気がするので、自己満足に浸りたい方は、考えてみて作成してはいかがでしょうか。

気が向いたら、また書きます。あとは、斜め線が太くみえるとかその辺のはず。

このあたりも読んでみると良いかな

An Icon is Worth 1,000 Words

参考サイト

https://material.google.com/style/icons.html#icons-system-icons
http://voidism.net/metallicratio/